<template>
  <div class="title">我的订单</div>
  <div class="orderList">
    <ul>
      <li v-for="(order, index) in orderList.list" :key="index">
        <div class="header">
          <div class="orderId">订单ID：{{order.id}}</div>
          <div class="addr">{{order.addrDetail}}</div>
        </div>
        <div class="orderDetail">
          <el-row>
            <el-col :span="16">
              <div class="goodsInfo" v-for="(orderDetail, index) in order.orderDetails" :key="index">
                <el-row>
                  <el-col :span="3">
                    <el-image fit="contain" style="width: 50px; height: 50px"
                              :src="`${SERVER_ADDR}/goods/pic/${orderDetail.goods.picList[0].url}`"/>
                  </el-col>
                  <el-col :span="19" style="font-size: 14px">
                    {{ orderDetail.goods.name }} {{ orderDetail.goods.color }} {{ orderDetail.goods.version }} {{ orderDetail.goods.price }} x {{ orderDetail.count }}
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-button v-if="order.status == 0" type="primary" @click="toPayPage(order.id)" style="margin: 10px;float: right">立即支付</el-button>
                <el-tag v-if="order.status == 1" type="primary" style="margin: 10px;float: right">待发货</el-tag>
                <el-button v-if="order.status == 2" type="primary" style="margin: 10px;float: right" @click="shipping(order.id,order.status)">确认收货</el-button>
                <el-tag v-if="order.status == 3" type="primary" style="margin: 10px;float: right">已收货</el-tag>
              </div>
<!--              <div v-else>-->
<!--                {{ ["已支付","已发货","已收货","退货退款","仅退款","售后","其他"][order.status - 1] }}-->
<!--              </div>-->
            </el-col>
          </el-row>
        </div>
      </li>
    </ul>
  </div>

  <div class="pageNav">
    <el-row class="row-bg" justify="center" style="padding-top: 20px;">
      <el-form-item>
        <el-pagination background layout="prev, pager, next" :total="orderList.total"
                       :page-size="orderList.pageSize" @change="getOrderList"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="orderList.pageSize" placeholder="每页显示条数" style="width: 100px; padding-left: 40px"
                   @change="getOrderList(orderList.pageNum)">
          <el-option label="5条" :value="5"/>
          <el-option label="10条" :value="10"/>
          <el-option label="15条" :value="15"/>
        </el-select>
      </el-form-item>
    </el-row>
  </div>
</template>

<script setup>
import {ref} from "vue";
import orderApi from "@/api/OrderApi.js";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
const orderList = ref({
  pageNum: 0,
  pageSize: 10,
  pages: 0
});
//获取当前用户订单列表
function getOrderList(pageNum) {
  orderApi.selectByUserId(pageNum, orderList.value.pageSize)
      .then(resp => {
        orderList.value = resp.data;
      });
}
getOrderList(1);
//跳转支付页
function toPayPage(id) {
  router.push({
    path: "/user/pay",
    query: {
      orderId: id
    }
  })
}
//确认收货
function shipping(orderId,status) {
  orderApi.shipping({id: orderId,status:status}).then(resp => {
    if(resp.code == 10000){
      ElMessage.success("已确认收获");
      getOrderList(1);
    }else {
      ElMessage.error(resp.msg)
    }
  })
}
</script>

<style scoped>
.title {
  font-weight: bold;
  font-size: 20px;
}
.orderList, .pageNav {
  margin: 10px 0;
  padding: 20px;
  border: 1px solid #222;
  background-color: #FFF;
}
.orderList ul li {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 10px;
}
.orderList ul li .header{
  border-bottom: 1px solid black;
}
.orderList ul li .orderDetail {
  margin-top: 10px;
}
.orderList ul li .orderDetail .goodsInfo {
  margin-bottom: 10px;
  height: 50px;
  line-height: 50px;
}
.orderList ul li .header .orderId {
  font-size: 14px;
  color: #222;
}
.orderList ul li .header .addr {
  font-size: 14px;
  color: var(--theme-color);
}
</style>